<template>
    <div class="manage-container">
        <!-- 使用原生输入框代替 ViewUI Plus 的 Input -->
        <div class="search-container">
            <Space  size="small">
                    <Input prefix="md-contact" placeholder="用户名" style="width: auto" />
                    <Button icon="md-refresh" type="primary">搜索</Button>
                    <Button icon="md-add" type="primary" @click="handleAdd">新增</Button>
            </Space>
        </div>

        <!-- table 区域 -->
        <div class="table-container">
            <Table border :columns="columns" :data="tableData" size="small">
                <!-- 状态列 -->
                <template #status="{ row }">
                    <Tag :color="row.status ? 'success' : 'error'">
                        {{ row.status ? '启用' : '禁用' }}
                    </Tag>
                </template>

                <!-- 在线状态列 -->
                <template #isOnline="{ row }">
                    <Tag :color="row.isOnline ? 'success' : 'default'">
                        {{ row.isOnline ? '在线' : '离线' }}
                    </Tag>
                </template>

                <!-- 操作列 -->
                <template #action="{ row }">
                    <Space>
                        <Button size="small" icon="md-create" type="text" @click="handleEdit(row)">编辑</Button>
                        <Button size="small" icon="md-close" type="text" @click="handleDelete(row)">删除</Button>
                    </Space>
                </template>
            </Table>
        </div>

        <!-- 添加用户弹窗 -->
        <UserModal
            v-model:visible="modalVisible"
            :type="modalType"
            :editData="editData"
            @success="handleModalSuccess"
        />
    </div>
</template>

<script setup>
import { Space } from 'view-ui-plus'
import { ref, onMounted } from 'vue'
import { getUserPage } from '@/api/user'
import UserModal from './UserModal.vue'
// 页面初始化
onMounted(() => {
    initUserPage()
})
// 搜索功能
const username = ref('')
const pageNum = ref(1)
const pageSize = ref(10)

// 表格数据
const tableData = ref([])
const total = ref(0)

// 表格列定义
const columns = [
    {
        title: '用户名',
        key: 'username',
        fixed: 'left'
    },
    {
        title: '昵称',
        key: 'nickname'
    },
    {
        title: '角色',
        key: 'roleName'
    },
    {
        title: '状态',
        slot: 'status' // 使用插槽
    },
    {
        title: '在线状态',
        slot: 'isOnline' // 使用插槽
    },
    {
        title: '创建时间',
        key: 'created',
        width: 200
    },
    {
        title: '更新时间',
        key: 'updated',
        width: 200
    },
    {
        title: '操作',
        slot: 'action', // 使用插槽
        width: 200
    }
]

// 弹窗相关
const modalVisible = ref(false)
const modalType = ref('add')
const editData = ref({})

// 初始化获取数据分页
const initUserPage = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        username: username.value
    }
    let res = await getUserPage(params)
    tableData.value = res.records
    total.value = res.total
}

// 打开新增弹窗
const handleAdd = () => {
    modalType.value = 'add'
    editData.value = {}
    modalVisible.value = true
}

// 打开编辑弹窗
const handleEdit = (row) => {
    modalType.value = 'edit'
    editData.value = { ...row }
    modalVisible.value = true
}

// 弹窗确认
const handleModalSuccess = async (data) => {
    if (modalType.value === 'add') {
        // 调用新增 API
        // await addUser(data)
    } else {
        // 调用编辑 API
        // await updateUser(data)
    }
    // 刷新表格数据
    initUserPage()
}

// 删除用户
const handleDelete = (row) => {
    console.log('删除用户:', row)
    // 实现删除逻辑
}
</script>

<style lang="less" scoped>
@import "./index.less";

.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    .search-input {
        position: relative;
        margin-right: 16px;
        
        .custom-input {
            width: 200px;
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            transition: all .2s ease-in-out;
            
            &:focus {
                border-color: #57a3f3;
                outline: none;
            }
        }
        
        .ivu-icon {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: #808695;
        }
    }
}
</style>
